<template>
  <div class="home" style="width:100%;">
    <h1 style="margin-top:7vh;margin-bottom:7vh;font-size:40px;">RookieWiki</h1>
    <el-divider></el-divider>
    <el-row v-if="!ifmobile">
      <el-col :span="8" v-for="(article, index) in articles" :key="index">
        <el-card :body-style="{ padding: '0px' }" style="margin:10px;min-height:200px;" shadow="hover">
          <span class="bottom-line"></span>
          <div style="margin:20px;padding: 14px;text-align:center">
            <h2><router-link :to="'/article/'+article.id">{{ article.title }}</router-link></h2>
            <p>{{ article.author }} <el-divider direction="vertical"></el-divider> {{ article.pubdate }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="ifmobile">
      <el-card :body-style="{ padding: '0px' }" style="margin:10px;min-height:200px;" shadow="hover" v-for="(article, index) in articles" :key="index">
        <div style="margin:20px;padding: 14px;text-align:center">
          <h2><router-link :to="'/article/'+article.id">{{ article.title }}</router-link></h2>
          <p>{{ article.author }} <el-divider direction="vertical"></el-divider> {{ article.pubdate }}</p>
        </div>
      </el-card>
    </el-row>
    <footer style="text-align:center;margin-top:20px;font-size:10px;">
      <p>链接 : <a href="https://code.visualstudio.com/">Visual Studio Code</a> (vscode天下第一)</p>
      <div class="container" style="padding-bottom:20px;">
        ©{{ year }} RookieWiki  <a target="_blank" href="http://www.beian.miit.gov.cn">鄂ICP备20003020号</a>
      </div>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Home',
  data () {
    return {
      articles: [],
      ifmobile: window.ifmobile,
      year: (new Date()).getFullYear()
    }
  },
  created () {
    this.axios.get('https://lycm.xyz/api/articles/')
      .then((res) => {
        this.articles = res.data
      })
      .catch((err) => {
        this.$notify.error({
          title: '在向服务器请求数据时出现错误',
          message: err
        })
      })
  }
}
</script>
<style scoped>
span.bottom-line{
  display: block;
  width: 100%;
  height: 2px;
  z-index: 10;
  box-sizing: border-box;
}
.el-card__body:hover > span{
  -webkit-animation: clipAni .5s infinite ease;
  animation-fill-mode:forwards;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  transition: all 2s;
}
@keyframes clipAni{
  0%{
    clip-path: inset(0% 100% 0% 100%);
    border: 1px solid rgba(64, 160, 255, 0);
  }
  100%{
    clip-path: inset(0% 0% 0% 0%);
    border: 1px solid rgb(64, 160, 255);
  }
}
</style>
